<template>
  <div class="index-conntainer">
     <div class="content">
       
      <!-- 查询条件 -->
      <div class="search-container">
        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
          <el-form-item :label="t('merchand.name')" prop="name">
            <el-input
              v-model="queryParams.name"
             :placeholder="t('merchand.name')"
              clearable
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          
          <el-form-item :label="t('merchand.phone')" prop="phone">
            <el-input
              v-model="queryParams.phone"
              :placeholder="t('merchand.phone')"
              clearable
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          
          <el-form-item :label="t('merchand.status')" prop="status">
          
            <el-select v-model="queryParams.status"  :placeholder="t('common.choose')"  clearable>
                <el-option
                  v-for="item in sys_audit_status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>  
          </el-form-item>
                      
          
          <el-form-item>
            <el-button type="primary" @click="handleQuery()"><i-ep-search />{{ t('common.search') }}</el-button>
            <el-button @click="resetQuery()"><i-ep-refresh />{{ t('common.reset') }}</el-button>
          </el-form-item>
        </el-form>
      </div>
       
       
       <!--表格显示数据 -->
       <el-table v-loading="loading" :data="rows" @selection-change="handleSelectionChange" >
            <!-- 展开行 -->
            <el-table-column type="expand">
             <template #default="scope">
                <el-row style="padding: 15px;">
                    <el-col :span="24">{{t('merchand.address')}}:  {{scope.row.address}}</el-col>
                   
                </el-row>
                <el-row style="padding: 15px;">
                    <el-col :span="24"> 
                      <baiduDisplay   :itemData="scope.row" style="width: 99%;height: 350px;"></baiduDisplay> 
                    </el-col>
                </el-row>
             </template>
           </el-table-column>
           
           
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column :label="t('common.id')" align="center" prop="id" width="80" />
            <el-table-column :label="t('merchand.name')" align="center" prop="name" />           
            <el-table-column :label="t('merchand.loginName')" align="center" prop="loginName" />
            <el-table-column :label="t('merchand.phone')" align="center" prop="phone" />
            <el-table-column :label="t('merchand.picture')" align="center"  width="200">
              <template #default="scope">
                 <img :src="scope.row.picture"  width="150">            
              </template>     
            </el-table-column>
            
            
            <el-table-column :label="t('merchand.status')" align="center" prop="status" >
               <template #default="scope">                 
                 <template  v-for="item in sys_audit_status" >
                   <el-tag  effect="dark" :type="item.elTagType"  v-if="item.value==scope.row.status" >{{ item.label}}</el-tag>   
                 </template>                       
               </template>              
            </el-table-column>
            
            <el-table-column :label="t('common.createTime')" align="center" prop="createTime" />
                       

            <el-table-column :label="t('common.operate')" width="250" align="center" class-name="small-padding fixed-width">
               <template #default="scope">                
                  <el-button link type="primary" icon="icon-check-one" @click="processHandler(scope.row)"  v-if="isAdmin && scope.row.status==='0'" >{{t('common.process')}}</el-button>
               </template>
            </el-table-column>
         </el-table>
           
          <el-pagination
               v-if="total>0"
               v-model:current-page="queryParams.page"
               v-model:page-size="queryParams.size"
               :page-sizes="[10, 20, 30, 40,50,100]"
               small="small"
               layout="total, sizes, prev, pager, next, jumper"
               :total="total"
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
             />
             
             
             
             
         <!-- 审核操作对放框 -->
          <el-dialog title="审核" v-model="openProcess" width="500px" append-to-body :close-on-click-modal="false" @closed="closeProcessForm">
             <el-form ref="processFormRef" :model="processForm"   label-width="80px">
                 <el-form-item   :label="t('merchand.result')" prop="status" :rules="[{ required: true, message: '该值不能为空', trigger: 'blur' }]" >
                    <el-radio-group v-model="processForm.status">
                      <template v-for="item in sys_audit_status" >
                        <el-radio  v-if="item.value!=='0'"  :label="item.value">{{item.label}}</el-radio> 
                      </template>                        
                     </el-radio-group>
                </el-form-item>
                
                <el-form-item  :label="t('merchand.comments')"  prop="description" :rules="[{ required: true, message: '该值不能为空', trigger: 'blur' }]">
                  <el-input v-model="processForm.description"
                      :rows="3"
                      type="textarea"
                      placeholder=""
                    />
                </el-form-item> 
              </el-form>
           <template #footer>
              <div class="dialog-footer">
                 <el-button type="primary" @click="submitProcessForm">{{ t('btn.confirm') }}</el-button>
                 <el-button @click="closeProcessForm">{{ t('btn.cancel') }}</el-button>
              </div>
           </template>
          </el-dialog>    
             
       
       </div>
  </div>
</template>

<script setup>
  import { ref} from 'vue'
  import { Plus } from '@element-plus/icons-vue' 
  import { ElMessage } from 'element-plus'
  import store from '@/store/index.js'
  //定义国际化的语言的文件
  import { useI18n } from 'vue-i18n';
  const { t } = useI18n();
  
    //百度地图显示的组件
   import baiduDisplay from '@/components/BaiduAddress/display.vue'
   
  //组合式函数(代码重复的问题)
  import { usePage } from '@/composables/PageComp.js'
  import { useAddAndEdit } from '@/composables/AddAndEditComp.js'
  const { proxy } = getCurrentInstance();
  // 只要是读取sys_dict_data数据，我们就采用组合式函数方法
  const {sys_audit_status} = proxy.useDict('sys_audit_status');
   
  import {dataApi, updateApi ,findByIdApi, processSubmitApi} from '@/api/merchandiser.js'
  
  //审核对话框
  const openProcess= ref(false)
  const processForm=ref({})
  
  //通用数据必须要有的
  const reactiveObject = ref({
     dataApi: dataApi,
     addApi: undefined,
     updateApi: updateApi,
     findByIdApi: findByIdApi,
     removeApi: undefined,
     proxy: proxy,
     //这里要变，主键名称
     primaryKey: 'id'
    }); 
  
  //分页查询组合函数，不会变的
  const { loading, total,rows ,queryParams,ids,single,multiple , handleQuery, resetQuery, handleSizeChange , handleCurrentChange, getList,handleSelectionChange }=usePage(reactiveObject)
  //新增和修改，不会变的
  const { open,title,form,reset,cancelForm,submitForm,handlerUpdate,handleAdd ,beforeAvatarUpload ,handlerDelete}=useAddAndEdit(reactiveObject)
  
  
  //初始化新装和修改的对话框的数据(必须要有)
  function initFormData(){
    form.value= {
      picture: undefined 
    } 
  }
  
  initFormData()
  
  //文件上传成功
  function handleAvatarSuccess(res, file) {
    if(res.code===200){
       form.value.picture= res.data.image_url
    }else{
       ElMessage.error( res.msg);
    } 
   }

   
   //计算属性，判断是不是管理员
   const isAdmin = computed(() => {
      const premission= store.getters['user/permissions'] ;
      return premission.includes("admin");
   });
   
   /********--------以下是审核操作------*****************/
   
   // 审核操作
   function processHandler(row){
     processForm.value.tenantId= row[reactiveObject.value.primaryKey]
     openProcess.value=true
   }
   
   //关闭对话框
   function closeProcessForm(){
     form.value = {};
     proxy.$refs["processFormRef"].resetFields();
     openProcess.value=false
   }
    
    // 提交审核结果
   function submitProcessForm(){
     proxy.$refs["processFormRef"].validate(valid => {
         if (valid) { 
           ElMessageBox.confirm(
              '确定要提交数据吗?',t('btn.confirm'),
              {
                confirmButtonText: t('btn.confirm'),
                cancelButtonText: t('btn.cancel'),
                type: 'danger',
              }
            )
            .then(() => {
               //确认
               processSubmitApi(processForm.value).then(resp=> {
                 ElMessage({
                     message: '提交数据成功',
                     type: 'success',
                   })
                  //关闭对话框
                  closeProcessForm();
                  //重新查询数据
                  getList();
                  
               })
               
            })
            .catch(() => {
            })            
        }
     })
   }
</script>

<style>
</style>
